<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
<#assign base=request.contextPath  />
    <link rel="stylesheet" href="${base}/Yang/layui/css/layui.css">
    <link rel="stylesheet" href="${base}/Yang/static/css/style.css">
    <link rel="icon" href="${base}/Yang/static/image/code.png">
    <base id="base" href="${base}"/>
    <style type="text/css">
    </style>
</head>
<body class="body">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  		<legend>租车</legend>
	</fieldset>
<div class="layui-row layui-col-space10">
    <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
    	<form class="layui-form" action="">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">选择租车的型号：</button><br/><br/>
    	  <div class="layui-form-item">
		      <select name="interest" lay-filter="aihao">
		        <option value=""></option>
		        <option value="0">A</option>
		        <option value="1">B</option>
		        <option value="2">C</option>
		        <option value="3">D</option>
		      </select>
		  </div>
    	<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">选择租车的条件：</button><br/><br/>
          <div class="layui-form-item">
		    <div class="layui-input-inline">
		      <select name="quiz1">
		        <option value="">请选择品牌</option>
		        <option value="">一汽重汽</option>
		        <option value="">江淮</option>
		        <option value="">五征</option>
		      </select>
		     </div>
		     <div class="layui-input-inline">
		      <select name="quiz2">
		        <option value="">请选择里程</option>
		        <option value="">不限</option>
		        <option value="">0KM--10KM</option>
		        <option value="">10KM--100KM</option>
		        <option value="">100KM--1000KM</option>
		        <option value="">1000KM以上</option>
		      </select>
			</div></div>
			<div class="layui-form-item">
		     <div class="layui-input-inline" >
		      <select name="quiz3">
		        <option value="">请选择容积</option>
		        <option value="">不限</option>
		        <option value="">40立方--50立方</option>
		        <option value="">50立方--60立方</option>
		        <option value="">60立方--70立方</option>
		        <option value="">70立方以上</option>
		      </select>
		      </div>
		     <div class="layui-input-inline">
		      <select name="quiz4">
		        <option value="">请选择价格</option>
		        <option value="">不限</option>
		        <option value="">0万--10万</option>
		        <option value="">20万--30万</option>
		        <option value="">30万--40万</option>
		        <option value="">40万以上</option>
		      </select>
		    </div>
		  </div>
		  	<div class="layui-upload">
			  <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="test1">上传展示图片：</button>
			  <div class="layui-upload-list">
			    <img style="width:90px;height:70px;"  class="layui-upload-img" id="demo1">
			    <p id="demoText"></p>
			  </div>
			</div> 
		  	<div class="layui-upload">
			  <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="test2">上传轮播图片：</button> 
			  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			    <div class="layui-upload-list" id="demo2"></div>
			 </blockquote>
			</div>
			  <div class="layui-form-item" style="float: right;">
			    <div class="layui-input-block">
			      <button class="layui-btn layui-btn-normal">立即提交</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			  </div>
		  </form>
    </div>
    <div class="layui-col-xs12 layui-col-sm8 layui-col-md8">
        <!-- 工具集 -->
        <div class="my-btn-box">
            <span class="fl">
                <a class="layui-btn layui-btn-danger" id="btn-delete-all">批量删除</a>
            </span>
            <span class="fr">
                <div class="layui-input-inline">
				    <label class="layui-form-label">搜索条件：</label>
				    <input type="text" autocomplete="off" placeholder="请输入要搜索的内容" class="layui-input" style="width: 150px;height: 31px;margin-top: 4px;">
				</div>
				<button class="layui-btn  layui-btn-sm">查询</button>  
            </span>
        </div>
        <!-- table -->
        <div id="dateTable"></div>
    </div>
</div>


<script type="text/javascript" src="${base}/Yang/layui/layui.js"></script>
<script type="text/javascript" src="${base}/js/index.js"></script>
<script type="text/javascript">

    // layui方法
    layui.use(['tree', 'table', 'vip_table', 'layer'], function () {

        // 操作对象
        var table = layui.table
                , vipTable = layui.vip_table
                , layer = layui.layer
                , $ = layui.jquery;

        // 表格渲染
        var tableIns = table.render({
            elem: '#dateTable'                  //指定原始表格元素选择器（推荐id选择器）
            , height: vipTable.getFullHeight()    //容器高度
            , toolbar: '#toolbarDemo'
            , cols: [[                  //标题栏
                {checkbox: true, sort: true, fixed: true, space: true}
                , {field: 'id', title: '品牌', width: 80}
                , {field: 'account', title: '里程', width: 120}
                , {field: 'auth_group_name', title: '型号', width: 120}
                , {field: 'last_login_time', title: '价格', width: 180}
                , {field: 'last_login_ip', title: '容积', width: 180}
            ]]
            , id: 'dataCheck'
            , url: '#'
            , method: 'get'
            , page: true
            , limits: [30, 60, 90, 150, 300]
            , limit: 30 //默认采用30
            , loading: false
            , done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
        });

        // 获取选中行
        table.on('checkbox(dataCheck)', function (obj) {
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

        // 树        
        layui.tree({
            elem: '#tree' //传入元素选择器
            , click: function (item) { //点击节点回调
                layer.msg('当前节名称：' + item.name);
                // 加载中...
                var loadIndex = layer.load(2, {shade: false});
                // 关闭加载
                layer.close(loadIndex);
                // 刷新表格
                tableIns.reload();
            }
            , nodes: [{ //节点
                name: '父节点1'
                , children: [{
                    name: '子节点11'
                    , children: [{
                        name: '子节点111'
                    }]
                }, {
                    name: '子节点12'
                }]
            }, {
                name: '父节点2'
                , children: [{
                    name: '子节点21'
                    , children: [{
                        name: '子节点'
                    }]
                }]
            }]
        });

        // you code ...


    });
</script>
<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '/upload/'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
  
  //多图片上传
  upload.render({
    elem: '#test2'
    ,url: '/upload/'
    ,multiple: true
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').append('<img style="width:100px;height: 70px;" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
      });
    }
    ,done: function(res){
      //上传完毕
    }
  });
  
  
  
});
</script>
</body>
</html>